<template>
  <div class="biaoqi">
    <el-dialog title="标旗设置" :visible.sync="log" :close-on-click-modal="false" width="600px">
    	<div style="display: flex;">
    		<div style=" padding:0 20px; position: relative; top: 5px; ">标旗：</div>
    		<el-radio-group v-model="all.color" style="display: flex;">
    			<el-tooltip style="margin-right: 20px;" popper-class="tooltip" effect="dark" placement="top"
    				v-for="item in flaglist" :key="item.id">
    				<div slot="content">{{item.flag}}</div>
    				<div>
    					<el-radio :label="item.type">
    						<span :style="{color:item.color,fontSize:25+'px'}"
    							class="iconfont icon-flag-fill"></span>
    					</el-radio>
    				</div>
    			</el-tooltip>
    		</el-radio-group>
    	</div>
    	<div style="display: flex; margin-top: 20px; width: 530px;">
    		<div style="padding-left: 20px; position: relative; width: 80px;">备注信息：</div>
    		<div class="flagareaContent" v-html="flagarea"></div>
    	</div>
    	<div style="display: flex; margin-top: 20px; width: 530px;">
    		<div style=" padding-left: 20px; position: relative; top: 5px; width: 100px;">添加备注：</div>
    		<el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="all.memo"></el-input>
    	</div>
    	<div style="padding-left: 20px; padding-top: 20px;" v-if="amountchai.indexOf('-C') != -1"><span
    			style="color: #DD2727;">注：</span>当前订单为拆分订单（电商平台购买数量大于2时自动拆分的订单）该操作将同步修改其它拆分关联订单的备注。</div>
    	<span slot="footer" class="dialog-footer">
    		<el-button type="primary" size="small" @click="flagloggo">确定</el-button>
    	</span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "biaoqi",
    props:['biaoqiall'],
    data() {
      return {
        log:false,
        all:{
          color:"",
          id:"",
          memo:""
        },
        flagarea:"",
        flaglist:[],

        amountchai:""
      }
    },
    created() {
      this.getflag()
      this.all.id = this.biaoqiall.id

      this.choosecolorid()
      //查看是否是拆单的
      this.amountchai = this.biaoqiall.source_id
    },
    mounted() {

    },
    methods: {
      //获取旗子
      getflag: function() {
      	axios.get("/api/gth/shop/flag/info").then(response => {
      		for (var i in response.data.data) {
      			if (response.data.data[i].type == 0) {
      				response.data.data[i].color = "#e4dfd7";
      			}
      			if (response.data.data[i].type == 1) {
      				response.data.data[i].color = "#ee3f4d";
      			}
      			if (response.data.data[i].type == 2) {
      				response.data.data[i].color = "#ebb10d";
      			}
      			if (response.data.data[i].type == 3) {
      				response.data.data[i].color = "#229453";
      			}
      			if (response.data.data[i].type == 4) {
      				response.data.data[i].color = "#2775b6";
      			}
      			if (response.data.data[i].type == 5) {
      				response.data.data[i].color = "#8076a3";
      			}
      		}

      		this.flaglist = response.data.data;
      	});
      },

      //选择标旗确认
      flagloggo: function() {
      	axios.post("/api/plan-market/order/flag", this.all)
      		.then(response => {
      			this.log = false;
      			this.$emit('huoquhaobiaoqi')
      		});
      },

      //选择标旗id
      choosecolorid: function() {
      	axios.get("/api/plan-market/order/memo?id=" + this.all.id).then(response => {
      		this.all.memo = response.data.data.memo;
      		this.all.color = response.data.data.flag;
          this.log = true;
      	});
      },
    }
  }
</script>

<style lang="scss" scoped>
  .biaoqi {

  }
</style>
